<template>
  <BaseDialog
    width="1400px"
    :title="$t('高级搜索')"
    v-model:visible="innerVisible"
  >
    <QueryForm
      ref="conditionForm"
      v-model:searchForm="searchForm"
      v-model:search-column="searchColumn"
      :searchBtnLoading="searchBtnLoading"
      @handle-search="onSearch"
    />
    <MyTable
      ref="commonTable"
      class="common-table"
      table-id="orderRule"
      :data-source="dataSource"
      :loading="tableLoading"
      :maxHeight="300"
      :page-vo="pageVo"
      :columns="columns"
      @handle-page-change="handlePageChange"
      @handle-cell-click="handleCellClick"
      @handle-cell-dblclick="handleCellDblclick"
    />
    <template #footer>
      <div style="text-align: right">
        <el-button @click="innerVisible = false" class="cancel-btn">{{
          $t("取消")
        }}</el-button>
        <el-button
          @click="onSubmit"
          class="save-btn"
          :disabled="!Object.keys(selectedRow).length"
          >{{ $t("确定") }}</el-button
        >
      </div>
    </template>
  </BaseDialog>
</template>
<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import i18n from "@/lang/index.js";
const props = defineProps({
  visible: {
    type: Boolean,
  },
  customerZhName: {
    type: String,
    default: "",
  },
  apiModule: {
    type: Function,
    required: true,
  },
  fixedParams: {
    type: Object,
    default: null,
  },
});
defineOptions({
  name: "AdvancedSelectDialog",
});
const emits = defineEmits(["update:visible", "onSubmit"]);
const innerVisible = computed({
  get() {
    return props.visible;
  },
  set(val) {
    emits("update:visible", val);
  },
});
const searchBtnLoading = ref(false);
const searchForm = reactive({});
const searchColumn = ref([
  {
    type: "label_input",
    label: i18n.global.t("客户代码"),
    prop: "mnemonicCode",
  },
  {
    type: "label_input",
    label: i18n.global.t("客户名称"),
    prop: "keyWord",
  },
]);
const selectedRow = ref({});
const pageVo = reactive({
  pageSize: 10,
  total: 10,
  currentPage: 1,
  status: true,
});
const dataSource = ref([]);
const tableLoading = ref(false);
const columns = ref([
  {
    title: "序号",
    type: "seq",
    width: 60,
    fixed: "left",
  },
  {
    title: i18n.global.t("客商代码"),
    field: "mnemonicCode",
  },
  {
    title: i18n.global.t("客商名称"),
    field: "customerZhName",
    filters: [{ data: { type: "text" } }],
    width: "180px",
    filterRender: {
      name: "FilterExtend",
    },
  },
  {
    title: i18n.global.t("英文名称"),
    field: "customerEnName",
    filters: [{ data: { type: "text" } }],
    width: "180px",
    filterRender: {
      name: "FilterExtend",
    },
  },
  {
    title: i18n.global.t("客商简称"),
    field: "customerShortName",
    width: "150px",
    filters: [{ data: { type: "text" } }],
    filterRender: {
      name: "FilterExtend",
    },
  },
  {
    title:  i18n.global.t("电话"),
    field: "phone",
    filters: [{ data: { type: "text" } }],
    filterRender: {
      name: "FilterExtend",
    },
  },
  {
    title: i18n.global.t("信用等级"),
    field: "creditLevel",
    filters: [{ data: { type: "text" } }],
    filterRender: {
      name: "FilterExtend",
    },
    width: "130px",
  },
  {
    title: i18n.global.t("海运销售"),
    field: "oceanSalePerName",
    filters: [{ data: { type: "text" } }],
    filterRender: {
      name: "FilterExtend",
    },
    width: "130px",
  },
  {
    title: i18n.global.t("海运客服"),
    field: "oceanServicePerName",
    filters: [{ data: { type: "text" } }],
    filterRender: {
      name: "FilterExtend",
    },
    width: "130px",
  },
]);
// 点击确定返回所选列表值
function onSubmit() {
  emits("onSubmit", selectedRow.value);
  innerVisible.value = false;
}
// 条件筛选
function onSearch() {
  pageVo.currentPage = 1;
  getData();
}
// 点击表格回调函数
function handleCellClick(row) {
  selectedRow.value = row;
}
// 双击表格回调函数
function handleCellDblclick(row) {
  selectedRow.value = row;
  onSubmit();
}
// 分页
function handlePageChange(val) {
  const { currentPage, pageSize } = val;
  pageVo.currentPage = currentPage;
  pageVo.pageSize = pageSize;
  getData();
}
// 初始化数据
async function getData() {
  tableLoading.value = true;
  searchBtnLoading.value = true;
  try {
    const { rows, total } = await props.apiModule({
      ...searchForm,
      ...props.fixedParams,
      pageNum: pageVo.currentPage,
      pageSize: pageVo.pageSize,
    });
    const data = rows.filter((el) => el.enableFlag === 1);
    dataSource.value = Object.assign([], data);
    // 内容类型处理
    pageVo.total = total;
    tableLoading.value = false;
  } finally {
    tableLoading.value = false;
    searchBtnLoading.value = false;
  }
}
onMounted(() => {
  // 将传过来的客商名称填上
  searchForm.keyWord = props.customerZhName;
  getData();
});
</script>
